<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">积分兑换</p>
    <div class="main">
        <!-- #################################### 查询 #################################### -->
        <div class="main_nav p20 ">
            <el-form :model="searchData" class="df ">
                <el-form-item label="规则名称：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="规则名称：" />
                </el-form-item>
                <el-form-item label="积分类型：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="积分类型：" />
                </el-form-item>
                <el-form-item label="是否启用：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="是否启用：" />
                </el-form-item>
                <el-form-item style="width: 20%;">
                    <div class="df">
                        <el-button type="primary" @click="searchDataBtn">查询</el-button>
                        <el-button type="primary" plain @click="resc">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- #################################### 表单 #################################### -->
        <div class="content p20 mt20">
            <el-button type="primary" @click="add">新建兑换</el-button>
            <el-button type="danger" plain>批量删除</el-button>
            <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" class="mt20"
                :header-cell-style="{ background: '#f0f6fe' }" max-height="450" border>
                <el-table-column type="selection" />
                <el-table-column label="编号" prop="id" />
                <el-table-column label="规则名称" prop="parentType" />
                <el-table-column label="积分类型" prop="childType" />
                <el-table-column label="积分有效期" prop="childType" />
                <el-table-column label="更新时间" prop="childType" />
                <el-table-column label="是否启用" prop="childType">
                    <template #default="props">
                        <el-switch v-model="props.row.isEnable" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="edit(props.row)">编辑</el-button>
                        <el-button size="small" link type="danger" @click="deleteData(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- #################################### 分页 #################################### -->
          <smartPager
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Number(total)"
            @change="handleCurrentChange" />
            <!-- #################################### 添加蒙层 #################################### -->
            <el-drawer v-model="drawer" title="新建发放规则" :with-header="false">
                <p class='drawerText'>新建发放规则</p>
                <el-form :model="addData" label-width="auto" style="max-width: 600px" :label-position="'top'">
                    <el-input disabled placeholder="基础信息"></el-input>
                    <el-form-item label="兑换类型">
                        <el-select v-model="value" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="addData.name" placeholder="车载音响" />
                    </el-form-item>
                    <el-form-item label="商品图">
                        <img v-if="false" class="zxImg"
                            src="https://img2.baidu.com/it/u=1796751218,272972234&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1718557200&t=7a4779bff55165518d7728b0b29b2a96"
                            alt="" @click="checkImg(recycleImage)">
                        <div v-else class="upload">
                            <!-- <el-icon class="add">
                                <Plus />
                            </el-icon> -->
                            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1"
                                v-model:file-list="recycleImg" :on-change="changeFile1">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                                <template #file="{ file }">
                                    <div>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <el-icon><zoom-in /></el-icon>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove2(file)">
                                                <el-icon>
                                                    <Delete />
                                                </el-icon>
                                            </span>
                                        </span>
                                    </div>
                                </template>
                            </el-upload>

                        </div>
                    </el-form-item>
                    <el-form-item label="兑换积分/价格">
                        <el-col :span="2">
                            积分
                        </el-col>
                        <el-col :span="10">
                            <el-input v-model="addData.integralType" placeholder="输入">
                                <template #suffix>
                                    积分
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span class="text-gray-500">+金额</span>
                        </el-col>
                        <el-col :span="10">
                            <el-input v-model="addData.integralType">
                                <template #suffix>
                                    元
                                </template>
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="每人限制兑换数量">
                        <el-col :span="11">
                            <el-input v-model="addData.integralType" placeholder="输入">
                                <template #suffix>
                                    天
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span class="text-gray-500">可兑换</span>
                        </el-col>
                        <el-col :span="11">
                            <el-input v-model="addData.integralType">
                                <template #suffix>
                                    次数
                                </template>
                            </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="发放数量">
                        <el-input v-model="addData.integralType" placeholder="填写">
                            <template #suffix>
                                份
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="可兑换时限">
                        <el-radio-group v-model="addData.integralType">
                            <el-radio :value="3">永久有效</el-radio>
                            <el-radio :value="6">日期范围 <el-input v-model="addData.integralType" placeholder="选择"
                                    :suffix-icon='Calendar'>
                                </el-input></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="规则说明">
                        <el-col :span="24">
                            <el-input v-model="addData.integralType" maxlength="300" placeholder="开始时间" show-word-limit
                                type="textarea" /></el-col>
                    </el-form-item>
                    <el-form-item>
                        是否启用
                        <el-switch v-model="addData.isEnable" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="drawer = false">取消</el-button>
                        <el-button>确定</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RequestNodeAllowedChildrenTypeSave, RequestNodeAllowedChildrenTypeDel, RequestNodeAllowedChildrenTypepostList, RequestNodeAllowedChildrenTypeGetlistlimit } from '@/api/path/index.js'
import { ElMessage } from 'element-plus'
import { Expand, Delete, ZoomIn, Plus, Calendar } from '@element-plus/icons-vue'
import { ref } from 'vue'

const editCenterDialogVisible = ref<any>(false)
const centerDialogVisible = ref<any>(false)
const searchData = ref<any>({
    value1: '',
    resource: '',
    name: '',
})
/* 添加的弹窗 */
const AddData = ref<any>({
    parentType: '',
    childType: '',
})
/* 修改弹窗 */
const EditData = ref<any>({
    parentType: '',
    childType: '',
})
/* 表格 */
const tableData = ref<any>([{
    id: 1,
    parentType: 'as',
    childType: 'as',
}])
/*抽屉*/
const drawer = ref<any>(false)
const add = () => {
    drawer.value = true
}
const addData = ref<any>({
    info: '',
    name: '',
    integralType: '',
})
/*积分类型*/
const value = ref<any>('consumption')

const options = [
    {
        value: 'consumption',
        label: '消费积分',
    },
    {
        value: 'activity',
        label: '活动积分',
    },
]
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(10)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    getData()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    getData()
}
// const total = ref()
const getData = () => {
    RequestNodeAllowedChildrenTypeGetlistlimit(currentPage.value, pageSize.value).then((res: any) => {
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
}
getData()
/* ************************ 添加数据 ************************ */
const AddList = () => {
    RequestNodeAllowedChildrenTypeSave(AddData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            centerDialogVisible.value = false
            AddData.value.parentType = ''
            AddData.value.childType = ''
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 单个删除 ************************ */
const deleteData = async (id: any) => {
    RequestNodeAllowedChildrenTypeDel(id).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 批量删除 ************************ */
const ids = ref<any>([])
const handleSelectionChange = (val: any) => {
    val.forEach((item: any) => ids.value.push(item.id));
}
const AllDelete = () => {
    const formimgs = new FormData()
    formimgs.append('ids', ids.value)
    RequestNodeAllowedChildrenTypepostList(formimgs).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ************************ 修改 ************************ */
const edit = (row: any) => {
    editCenterDialogVisible.value = true
    EditData.value = row
}
const EditAddData = () => {
    RequestNodeAllowedChildrenTypeSave(EditData.value).then((res: any) => {
        if (res.code == 0) {
            ElMessage.success(res.msg)
            editCenterDialogVisible.value = false
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .main_nav {
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;

        .drawerText {
            font-size: 1.125rem;
            font-weight: 700;
        }
    }

    :deep(.el-overlay .el-icon svg) {
        color: black;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}

.zxImg {
    width: 80px;
    height: 80px;
    border-radius: 0.5rem;
}
</style>
